<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
	*{
		padding:0;
		margin:0;
	}
	#banner{
		width:1200px;
		height:500px;
		margin:50px auto;
		position:relative;
		overflow:hidden;
	}
	#banner .focus{
		width:1200px;
		height:400px;
	}
	#banner li{
		width: 700px;
		height: 400px;
		list-style:none;
		position:absolute;
		transition:all 500ms;
	}
	#banner li img{
		width:100%;
		height:100%;
	}
	.list1{
		transform-origin:left bottom;
		transform:translateX(0px) scale(0.8);
		z-index:2;
		
	}
	.list2{
		transform:translateX(250px);
		z-index:3;
	}
	.list3{
		transform-origin:right bottom;
		transform:translateX(500px) scale(0.8);
		z-index:2
	}
	.list4{
		transform-origin:right bottom;
		transform:translateX(1050px) scale(0.8);
	}
	.list5{
		transform-origin:right bottom;
		transform:translateX(1350px) scale(0.8);
	}
	.lineBar{
		width:100%;
		height:100px;
		position:absolute;
		bottom:0;
		left:0;
		display:inline-block;
		text-align:center;
	}
	.lineBar > span{
		display:inline-block;
		width:35px;
		height:5px;
		background:#ccc;
		line-height:100px;
		cursor:pointer;
	}
	.lineBar > span.on{
		background:orange;
	}
  </style>
 </head>
 <body>
	<div id="banner">
		<div class="focus">
			<ul>
				<li class="list1"><img src="images/1.jpg" alt="" /></li>
				<li class="list2"><img src="images/2.jpg" alt="" /></li>
				<li class="list3"><img src="images/3.jpg" alt="" /></li>
				<li class="list4"><img src="images/4.jpg" alt="" /></li>
				<li class="list5"><img src="images/5.jpg" alt="" /></li>
			</ul>
		</div>
		<div class="lineBar">
			<span class="on"></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
	<script type="text/javascript">
		var aLi = document.querySelectorAll('li');
		var aSpan = document.querySelectorAll('span');
		var aName = [];//收集所有li的class
		var len = aLi.length;
		var index = 0;
		getAllClass();
		function getAllClass() {
			for(var i = 0; i < len; i++){
				aName.push(aLi[i].className)
			}
		}
		function nextPic() {
			index++;
			if(index >= len){
				index = 0;
			}
			aName.unshift(aName[len - 1]);
			aName.pop(aName[len - 1]);
			for(var i = 0; i < len; i++){
				aLi[i].className = aName[i];
			}
			changeLine();
		}
		function prevPic(){
			index--;
			if(index < 0){
				index = len - 1;
			}
			aName.push(aName[0]);
			aName.shift(aName[0]);
			for(var i = 0; i < len; i++){
				aLi[i].className = aName[i];
			}
			changeLine();

		}

		document.addEventListener('mousedown', function(e) {
			var parent = e.target.parentNode;
			if(parent.className === 'list1'){
				prevPic();
			}
			if(parent.className === 'list3'){
				nextPic();
			}
		})
		changeLine();
		function changeLine(){
			for(var i = 0; i < len; i++){
				aSpan[i].className = '';
			}
			console.log(index);
			aSpan[index].className = 'on';
		}
	</script>
 </body>
</html>
